<template>
	<view class="bottom center" @click="clickHandler">
		<text class="bottom-btn">{{btnText}}</text>
	</view>
</template>

<script>

	export default {
		props: {
			btnText: {
				type: String,
				default: '立即购买' // 默认文本为"立即购买"
			},
			courseId: [String, Number]
		},

		methods: {
			clickHandler() {
				this.$emit('clickBottom')
			}
		}
	}

</script>

<style lang="scss">
	// 底部容器样式
	.bottom {
		position: fixed; // 固定定位
		left: 0; // 左边距离
		right: 0; // 右边距离
		bottom: 0; // 底部距离
		background-color: #FFFFFF; // 背景颜色
		height: 100rpx; // 高度
		border-top: $mxg-underline; // 顶部边框
	}

	// 底部按钮样式
	.bottom-btn {
		width: 700rpx; // 宽度
		background-color: #345DC2; // 背景颜色
		text-align: center; // 文本居中
		font-size: 35rpx; // 字体大小
		color: #FFFFFF; // 文字颜色
		border-radius: 50rpx; // 圆角
		line-height: 80rpx; // 行高
	}
</style>
